<div class="biaoqing">
    <style>
        .icon-c {display: none;position: absolute;cursor: pointer;top: 0;right: 0;}
        #uploaderFiles li {position: relative;}
        #uploaderFiles li:hover .icon-c{display: inline-block;}
        #uploaderFiles2 li {position: relative;}
        #uploaderFiles2 li:hover .icon-c{display: inline-block;}
        .jifen input{width: 60px !important;}
    </style>
    <div class="jifen" style="border-top: 2px solid #57a957;">
        <div class="weui-cells__title">积分管理</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell" style="color: #222">
                <div class="weui-cell__hd">
                    <label class="weui-label" style="font-size: 13px; color: #333; font-weight: normal">发帖增加积分</label>
                </div>
                <div class="weui-cell__hd" style="position: relative">
                    <input id="posting" type="number" style="color: #333; border: 1px solid #999" class="editor-config-descripton-input weui-btn weui-btn_mini weui-btn_default " placeholder="积分">
                    <span style="position: absolute;top: 0;right: 0; margin-left: -20px; display: none;" class="weui-icon weui-icon-original weui-icon-success"></span>
                </div>
                |
                <div class="weui-cell__hd">
                    <label class="weui-label" style="font-size: 13px; color: #333; font-weight: normal">签到增加的积分</label>
                </div>
                <div class="weui-cell__hd" style="position: relative">
                    <input id="checkin" type="number" style="color: #333; border: 1px solid #999" class="editor-config-descripton-input weui-btn weui-btn_mini weui-btn_default" placeholder="积分">
                    <span style="position: absolute;top: 0;right: 0; margin-left: -20px; display: none;" class="weui-icon weui-icon-original weui-icon-success"></span>
                </div>
                |<div class="weui-cell__hd">
                <label class="weui-label" style="font-size: 13px; color: #333; font-weight: normal">回帖增加的积分</label>
            </div>
                <div class="weui-cell__hd" style="position: relative;">
                    <input id="reply" style="color: #333; border: 1px solid #999" type="number" class="editor-config-descripton-input weui-btn weui-btn_mini weui-btn_default" placeholder="积分">
                    <span style="position: absolute;top: 0;right: 0; margin-left: -20px; display: none;" class="weui-icon weui-icon-original weui-icon-success"></span>
                </div>
                |
                <div class="weui-cell__hd">
                    <label  style="font-size: 13px; color: #333; font-weight: normal">每回帖不同帖子</label>
                </div>
                <div class="weui-cell__hd" style="position: relative;">
                    <input id="cisu" style="color: #333; border: 1px solid #999" type="number" class="editor-config-descripton-input weui-btn weui-btn_mini weui-btn_default" placeholder="次数">
                    <span style="position: absolute;top: 0;right: 0; margin-left: -20px; display: none;" class="weui-icon weui-icon-original weui-icon-success"></span>
                </div>
                <div class="weui-cell__hd">
                    <label class="weui-label" style="font-size: 13px; color: #333; font-weight: normal ;width:71px;">次,额外增加</label>
                </div>
                <div class="weui-cell__hd" style="position: relative;">
                    <input id="oneIntegral" style="color: #333; border: 1px solid #999" type="number" class="editor-config-descripton-input weui-btn weui-btn_mini weui-btn_default" placeholder="积分">
                    <span style="position: absolute;top: 0;right: 0; margin-left: -20px; display: none;" class="weui-icon weui-icon-original weui-icon-success"></span>
                </div>
                <div class="weui-cell__hd">
                    <label style="font-size: 13px; color: #333; font-weight: normal">分</label>
                </div>
                |
                <div class="weui-cell__hd">
                    <label  style="font-size: 13px; color: #333; font-weight: normal">每日积分上限</label>
                </div>
                <div class="weui-cell__hd" style="position: relative;">
                    <input id="maxIntegral" style="color: #333; border: 1px solid #999" type="number" class="editor-config-descripton-input weui-btn weui-btn_mini weui-btn_default" placeholder="积分">
                    <span style="position: absolute;top: 0;right: 0; margin-left: -20px; display: none;" class="weui-icon weui-icon-original weui-icon-success"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="biaoqing" style="border-top: 2px solid #57a957;">
        <div class="weui-cells__title">
            <h2 style="display: inline-block; vertical-align: middle;">表情管理</h2>
        </div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">重卡汇高级会员专属表情</p>
                            <div class="weui-uploader__info" style="font-size: 14px;">
                                <select class="biaoqingdengji">
                                    <option value="1">一级</option>
                                    <option value="2">二级</option>
                                    <option value="3">三级</option>
                                    <option value="4">四级</option>
                                    <option value="5">五级</option>
                                </select>
                                等级可以使用
                            </div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">

                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //
    /**
     * 上传图片到服务器
     * @param inputID 上传的输入框ID
     * @param uri 上传的地址
     * @return Promise
     * */
    $('#uploaderInput').on('change', function () {
        var file = this.files[0];
        var size = file.size;
        var MIXSIZE = 50000000;
        if (size >= MIXSIZE) {
            return alert('上传文件太大')
        }
        $(this).before(`
            <div class="weui-uploader__file-content progress">0%</div>
        `);
        var formDate = new FormData();
        formDate.append('0', $('#uploaderInput')[0].files[0]);
        $.ajax({
            url: 'http://api.hongyanche.com/upload/expression',
            type: 'POST',
            cache: false,
            data: formDate,
            xhr: function () {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                }
                return myXhr;
            },
            xhrFields:{
                withCredentials:true
            },
            processData: false,
            contentType: false,
            success: function (data) {
                $('.progress').remove();
                if (data.state) {
                    $('#uploaderFiles').append(`
                    <li class="weui-uploader__file" style="background-image:url(${data.data.url})">
                        <i class="weui-icon weui-icon-cancel weui-icon-original icon-c delete"></i>
                    </li>
                    `);
                    $.ajax({
                        url: 'http://api.hongyanche.com/marketing_admin/expression_add',
                        type: 'POST',
                        xhrFields:{
                            withCredentials:true
                        },
                        data: {
                            url: data.data.url
                        }
                    });
                }  else {
                    alert(data.errormsg)
                }
            },
            error: function (err) {

            }
        })
    });
    function progressHandlingFunction(e) {
        if (e.lengthComputable) {
            var percent = e.loaded/e.total*100;
            $('.progress').html(percent.toFixed(2) + "%");
        }
    };
    (function (w, u) {
        function setIntegral(data) {
            $('#posting').val();
            $('#checkin').val();
            $('#reply').val();
        }

        // rule_modify
        // rele_list

        $.ajax({
            url: 'http://api.hongyanche.com/forum_admin/rule_list',
            type: 'POST',
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                var datas = data.data.list;
                for(var i =0;i<datas.length;i++) {
                    if (datas[i].way == 1) {
                        $('#checkin').val(datas[i].amount).attr({
                            'rule_id': datas[i].rule_id,
                            'way': datas[i].way,
                            'name': 'amount'
                        });
                    }
                    if (datas[i].way == 3) {
                        $('#reply').val(datas[i].amount).attr({
                            'rule_id': datas[i].rule_id,
                            'way': datas[i].way,
                            'name': 'amount'
                        });
                        $('#cisu').val(datas[i].frequency).attr({
                            'rule_id': datas[i].rule_id,
                            'way': datas[i].way,
                            'name': 'frequency'
                        });
                        $('#oneIntegral').val(datas[i].integral).attr({
                            'rule_id': datas[i].rule_id,
                            'way': datas[i].way,
                            'name': 'integral'
                        });
                    }
                    if (datas[i].way == 4) {
                        $('#posting').val(datas[i].amount).attr({
                            'rule_id': datas[i].rule_id,
                            'way': datas[i].way,
                            'name': 'amount'
                        })
                    }
                    $('#maxIntegral').val(datas[i].upper_limit).attr({
                            'rule_id': datas[i].rule_id,
                            'way': ' ',
                            'name':'upper_limit'
                        });
                }
            }
        });

        $('input[type=number]').on('change', function() {
            var _a = $(this).attr('name');
            var _url = 'http://api.hongyanche.com/forum_admin/rule_modify';
            var _b = $(this).val();
            var _way = $(this).attr('way');
            var _rule_id = $(this).attr('rule_id');
            var self = $(this);
            $.ajax({
                url: _url,
                type: 'POST',
                xhrFields:{
                    withCredentials:true
                },
                data: {
                    key: _a,
                    content: _b,
                    rule_id: _rule_id
                },
                success: function(data) {
                    if(data.state) {
                        self.next().show();
                        setTimeout(function(){
                            self.next().hide();
                        },1000);
                    } else {
                        TOAST.wran('修改失败', ' ', 1)
                    }
                },
                error: function() {
                    TOAST.wran('网络错误', ' ', 1);
                }
            })
        });

        $.ajax({
            url: 'http://api.hongyanche.com/marketing_admin/expression_list',
            type: 'POST',
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                data = data.data.list;
                $('.biaoqingdengji').val(data[0].limit);
                data.forEach(function (item, index) {
                    $('#uploaderFiles').append(`
                         <li class="weui-uploader__file" style="background-image:url(${item.imgurl})">
                    <i data-id="${item.expression_id}" class="weui-icon weui-icon-cancel weui-icon-original icon-c delete"></i>
                </li>
                    `);
                })
            }
        });
        // 删除表情
        $('#uploaderFiles').on('click','.delete' ,function () {
            var id = $(this).attr('data-id');
            var Delete = confirm('是否删除该表情?');
            if (Delete) {
                $.ajax({
                    url: 'http://api.hongyanche.com/marketing_admin/expression_remove',
                    type: 'POST',
                    data: {
                        expression_id: id
                    },
                    xhrFields:{
                        withCredentials:true
                    },
                    success: function (data) {
                        $.ajax({
                            url: 'http://api.hongyanche.com/marketing_admin/expression_list',
                            type: 'POST',
                            xhrFields:{
                                withCredentials:true
                            },
                            success: function (data) {
                                $('#uploaderFiles').html('');
                                data = data.data.list;
                                data.forEach(function (item, index) {
                                    $('#uploaderFiles').append(`
                         <li class="weui-uploader__file" style="background-image:url(${item.imgurl})">
                    <i data-id="${item.expression_id}" class="weui-icon weui-icon-cancel weui-icon-original icon-c delete"></i>
                </li>
                    `)
                                })
                            }
                        });
                    }
                })
            }
        });
        // 表情等级
        $('.biaoqingdengji').change(function () {
            var value = $(this).val();
            $.ajax({
                url: 'http://api.hongyanche.com/marketing_admin/setlevel',
                type: 'POST',
                xhrFields:{
                    withCredentials:true
                },
                data: {
                    level: value
                },
                success: function (data) {
                    alert(data.errormsg)
                }
            })
        });
    })(window, undefined);
</script>
